<template>
  <div id="earth-wrap">
    <!-- <div id="currentCountryName">点击定位</div> -->
    <svg id="earth-js"></svg>
    <canvas id="three-js"></canvas>
    <canvas class="ej-canvas"></canvas>
  </div>
</template>
<script>
export default {
  name: "Earth",
  props: {
    countryName: {
      type: String,
    },
  },
  data() {
    return {
      g: null,
    };
  },
  mounted() {
    setTimeout(() => {
      this.init();
    }, 1000);
  },
  methods: {
    init() {
      const { d3, earthjs } = window;
      const { offsetWidth, offsetHeight } = d3.select("#earth-wrap").node();
      const g = earthjs({ width: offsetWidth, height: offsetHeight, padding: 5 })
        .register(earthjs.plugins.inertiaPlugin())
        .register(earthjs.plugins.hoverCanvas())
        .register(earthjs.plugins.clickCanvas())
        .register(earthjs.plugins.centerCanvas())
        .register(earthjs.plugins.canvasPlugin())
        .register(earthjs.plugins.dropShadowSvg())
        .register(earthjs.plugins.countryCanvas())
        .register(earthjs.plugins.autorotatePlugin())
        .register(
          earthjs.plugins.worldCanvas("https://project-star.oss-cn-beijing.aliyuncs.com/npm/static/d/world-110m.json")
        )
        .register(earthjs.plugins.threejsPlugin())
        .register(earthjs.plugins.globeThreejs())
        .register(
          earthjs.plugins.pinCanvas(
            "https://project-star.oss-cn-beijing.aliyuncs.com/npm/static/d/bars.json",
            "https://project-star.oss-cn-beijing.aliyuncs.com/npm/static/img/flag2.png"
          )
        );
      g.canvasPlugin.selectAll(".ej-canvas");
      this.g = g;
      g._.options.showSelectedCountry = true;
      g._.options.showBorder = true;

      g._.options.transparent = true;

      g.centerCanvas.focused((event, country) => {
        console.log(event, country);
        g.autorotatePlugin.stop();
        g.worldCanvas.style({});
        if (event.metaKey) {
          const arr = g.worldCanvas.selectedCountries().concat(country);
          g.worldCanvas.selectedCountries(arr);
        } else {
          g.worldCanvas.selectedCountries([country]);
        }
        console.log(country);
      });
      g.clickCanvas.onCountry({
        autorotate(event, country) {
          console.log(event, country);
          if (!country) {
            g.worldCanvas.style({});
            g.autorotatePlugin.start();
            g.worldCanvas.selectedCountries([]);
          }
        },
      });
      g.ready(() => {
        const data = g.worldCanvas.data();
        g.countryCanvas.data(data);
        g.hoverCanvas.data(data);
        g.clickCanvas.data(data);
        g.create();
        const arr = g.worldCanvas.countries().filter((item) => item.properties.name === this.countryName.toUpperCase());
        // g.worldCanvas.style({ selected: 'rgba(255, 235, 0, 0.4)' });
        // g.worldCanvas.selectedCountries(arr);
        g.autorotatePlugin.stop();
        if (arr.length > 0) {
          g.centerCanvas.go(arr[0].id);
        }
      });
    },
    select() {
      const { g } = this;
      const arr = g.worldCanvas.countries().filter((item) => item.properties.name === this.countryName.toUpperCase());
      g.worldCanvas.style({ selected: "rgba(255, 235, 0, 0.4)" });
      g.worldCanvas.selectedCountries(arr);
      g.autorotatePlugin.stop();
      if (arr.length > 0) {
        g.centerCanvas.go(arr[0].id);
      }
    },
  },
  watch: {
    countryName() {
      this.select();
    },
  },
};
</script>
<style>
#earth-wrap {
  width: 100%;
  height: 360px;
  position: relative;

  /* background-color: #555; */
}
#earth-js {
  z-index: 1;
  cursor: pointer;
}
#currentCountryName {
  position: absolute;
  top: 10;
  left: 10;
  z-index: 3;
  cursor: progress;
}
#earth-js,
#three-js,
.ej-svg,
.ej-canvas,
.top {
  position: absolute;
  left: 0;
  top: 0;
}
.ej-hidden {
  display: none;
}
</style>
